<template>
  <div v-if="buttonDisable.length !== 0">
    <TPageBtn :btn-list="btnList" @handleBtn="handleClick" />
  </div>
</template>

<script>
import TPageBtn from '@/components/basic/TPageBtn.vue'

export default {
  name: 'FooterButton',
  components: { TPageBtn },
  props: {
    buttonDisable: {
      type: Array,
      default: () => {
        return ['save', 'submit', 'doNext', 'countermand', 'redeploy', 'back', 'close']
      }
    }
  },
  data() {
    return {
      btnOptions: [
        {
          button: '保存',
          code: 'save',
          method: 'handleSave'
        },
        {
          button: '提交',
          code: 'submit',
          method: 'updateDatas'
        },
        {
          button: '下一步',
          code: 'doNext',
          method: 'handleNext'
        },
        {
          button: '撤回',
          code: 'countermand',
          method: 'revocation'
        },
        {
          button: '转派',
          code: 'redeploy',
          method: 'handlereDeploy'
        },
        {
          button: '回退',
          code: 'back',
          method: 'handleBack'
        },
        {
          button: '删除',
          code: 'delete',
          method: 'handleDelete'
        },
        {
          button: '关闭',
          code: 'close',
          method: 'handleClose'
        }

      ]
    }
  },
  computed: {
    btnList() {
      return this.btnOptions.filter(item => this.buttonDisable.includes(item.code))
    }
  },
  methods: {
    handleClick(fn) {
      this[fn]()
    },
    // 保存
    handleSave() {
      this.$emit('handleSave')
    },
    handleDelete(){
      this.$emit('handleDelete')
    },
    // 下一步
    handleNext() {
      this.$emit('handleNext')
    },
    // 退回
    handleBack() {
      this.$emit('handleBack')
    },
    // 转派
    handlereDeploy() {
      this.$emit('handlereDeploy')
    },
    // 撤回
    updateDatas() {
      this.$emit('updateDatas')
    },
    // 提交
    revocation() {
      this.$emit('revocation')
    },
    // 关闭
    handleClose() {
      this.$emit('handleClose')
    }
  }
}
</script>

<style scoped lang="scss">
.footerButton {
  // box-shadow: 0px 0px 6px 0px rgba(191, 192, 192, 0.52);
  border: 1px solid #ebeef5;
  margin-bottom: 15px;
  margin-top: 0;
  padding: 20px 0;
  .el-method {
    min-width: 100px;
    height: 24px;
    line-height: 0;
    margin-left: 24px;
  }
}
</style>
